<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import Account from '../base/AccountStore';

// 评价列表数据
let evaluations = ref<any[]>([])
let loading = ref(false)
let hasMore = ref(true)
let limit = 10
let router = useRouter()
let account = Account()

// 组件加载时请求评价数据
onMounted(()=>{
    // 检查是否登录
    if (!account.isLogin) {
        ElMessage.warning('请先登录后再查看评价')
        router.push({
            name: 'login'
        })
        return
    }
    
    loadEvaluations()
})

// 加载评价数据
function loadEvaluations() {
    if (loading.value) return
    
    loading.value = true
    let params:any = {
        limit,
        offset: evaluations.value.length,
        filter: 1 // 只获取已审核通过的评价
    }
    
    startRequest(RequestPath.evaluationListGet, 'get', params).then((response)=>{
        let newEvaluations = []
        // 尝试多种可能的数据结构
        if (response.data && response.data.datas) {
            newEvaluations = response.data.datas
        } else if (response.data && response.data.data && Array.isArray(response.data.data)) {
            newEvaluations = response.data.data
        } else if (response.data && Array.isArray(response.data)) {
            newEvaluations = response.data
        }
        
        hasMore.value = newEvaluations.length >= limit
        evaluations.value.push(...newEvaluations)
    }).catch((error)=>{
        console.error('加载评价错误:', error)
        ElMessage.error({
            message: error.response?.data?.error || '加载评价数据失败'
        })
    }).finally(() => {
        loading.value = false
    })
}

// 跳转到商品详情页
function goToGoodsDetail(gid: number) {
    router.push({
        name: 'goodsDetail',
        params: { id: gid }
    })
}

// 格式化日期
function formatDate(dateString: string) {
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}
</script>

<template>
    <div class="evaluation-list-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">我的评价</h1>
            <div class="page-subtitle">查看您所有的商品评价记录</div>
        </div>

        <!-- 评价列表 -->
        <div class="evaluation-list" v-if="evaluations.length > 0">
            <div class="evaluation-item" v-for="evaluation in evaluations" :key="evaluation.id">
                <div class="evaluation-header">
                    <div class="user-info">
                        <el-avatar size="small" style="background-color: #e02020;">
                            {{ evaluation.user?.username?.charAt(0) || '用' }}
                        </el-avatar>
                        <span class="username">{{ evaluation.user?.username || '用户' }}</span>
                    </div>
                    <div class="evaluation-date">{{ formatDate(evaluation.created_at) }}</div>
                </div>
                
                <div class="evaluation-content">
                    <div class="rating-section">
                        <el-rate 
                            v-model="evaluation.star" 
                            disabled 
                            show-score 
                            text-color="#ff9900" 
                            score-template="{value} 分"
                        />
                    </div>
                    
                    <div class="content-section">
                        <p class="evaluation-text">{{ evaluation.content }}</p>
                    </div>
                    
                    <div class="goods-info" @click="goToGoodsDetail(evaluation.gid)">
                        <div class="goods-link">
                            <el-icon><Link /></el-icon>
                            <span>查看评价商品</span>
                        </div>
                    </div>
                </div>
                
                <div class="evaluation-divider"></div>
            </div>
        </div>

        <!-- 空状态 -->
        <div class="empty-state" v-else-if="!loading">
            <el-empty description="暂无评价记录">
                <el-button type="primary" @click="router.push({ name: 'order' })">
                    去订单页评价商品
                </el-button>
            </el-empty>
        </div>

        <!-- 加载更多 -->
        <div class="load-more" v-if="hasMore && evaluations.length > 0">
            <el-button 
                :loading="loading" 
                @click="loadEvaluations" 
                type="primary" 
                link
            >
                {{ loading ? '加载中...' : '点击加载更多' }}
            </el-button>
        </div>

        <!-- 加载状态 -->
        <div class="loading-state" v-if="loading && evaluations.length === 0">
            <el-skeleton :rows="5" animated />
        </div>
    </div>
</template>

<style scoped>
.evaluation-list-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.page-subtitle {
    font-size: 14px;
    color: #666;
}

.evaluation-list {
    margin-bottom: 30px;
}

.evaluation-item {
    padding: 24px 0;
}

.evaluation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.username {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.evaluation-date {
    color: #999;
    font-size: 14px;
}

.evaluation-content {
    margin-left: 44px; /* 对齐用户头像 */
}

.rating-section {
    margin-bottom: 12px;
}

.content-section {
    margin-bottom: 16px;
}

.evaluation-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.goods-info {
    margin-top: 12px;
}

.goods-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e02020;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s;
}

.goods-link:hover {
    color: #c61818;
}

.evaluation-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 16px 0;
}

.evaluation-item:last-child .evaluation-divider {
    display: none;
}

.empty-state {
    padding: 60px 0;
    text-align: center;
}

.load-more {
    text-align: center;
    padding: 20px 0;
}

.loading-state {
    padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .evaluation-list-container {
        padding: 16px;
        margin: 0 16px;
    }
    
    .evaluation-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .evaluation-content {
        margin-left: 0;
    }
    
    .page-title {
        font-size: 24px;
    }
}
</style>